<template>
	<view class="container_list PF-R">
		<view class="class-info">
			<view class="class-name disp flex-row between">
				<view class="camp">课程信息：</view>
				<view class="two-line flex1 uni-ml-5">{{school.className}}</view>
			</view>
			<view class="time disp flex-row between">
				<view class="camp">营期信息：</view>
				<view class="two-line flex1 uni-ml-5">{{school.attrName}}</view>
			</view>
			<view class="class-name disp flex-row between">
				<view class="camp">班级信息：</view>
				<view class="two-line flex1 uni-ml-5">{{school.classTag}}</view>
			</view>
			<view class="class-name disp flex-row between">
				<view class="camp">校区：</view>
				<view class="two-line flex1 uni-ml-5">{{school.schoolName}}</view>
			</view>
			<view class="class-name disp flex-row between">
				<view class="camp">城市：</view>
				<view class="two-line flex1 uni-ml-5">{{school.cityName}}</view>
			</view>
		</view>
		
		<view class="stu_info basic-label fs30">学员信息</view>
		<view class="class-list-item" v-for="(item, key) in school.students" :key="key" @click="toStuIndex(item)" >
			<view class="item-left">
				<image :src="item.avatar" class="img uni-ml-20"></image>
				<view class="info uni-ml-20">
					<view class="top basic-label fs32 PF-M">{{item.realName}}</view>
				</view>
			</view>
		<!-- 	<image class="item-right uni-mr-20"@click="go"
				src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/center/arrow.png" mode="widthFix">
			</image> -->
		</view>
		<view class="role_tem" v-for="(item, key) in roleList" :key="key">
			<view class="stu_info basic-label fs30 uni-mt-10">{{item}}</view>
			<block  v-for="(role, keys) in creatList" :key="keys">
				<view class="class-list-item" @click="go(role.uid)" v-if="role.roleName === item">
					<view class="item-left">
						<image :src="role.avatar" class="img uni-ml-20"></image>
						<view class="info uni-ml-20">
							<view class="top basic-label fs32 PF-M">{{role.nickname}}</view>
						</view>
					</view>
					<image class="item-right uni-mr-20"
						src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/center/arrow.png" mode="widthFix">
					</image>
				</view>
			</block>
			
		</view>
		
		<!-- <button class='btn_grand grand margins' formType="submit" @click="enterGo()">申请入班</button> -->
	</view>
</template>

<script>
	import { getSchoolInfo } from "@/api/user.js"
	export default {
		data() {
			return {
				school: {},
				className: '5天少年特训营4班',
				time: '2023-06-25——2023-07-07',
				roleList: [],
				creatList: []
			}
		},
		onLoad(op) {
			let id = op.schoolId;
			this.getInfo(id);
		},
		
		methods: {
			enterGo() {
				this.m_toast("研发中");
			},
			
			go(uid) {
				uni.navigateTo({
					url: `/pages/summer/my_teacher/index?uid=${uid}`
				})
			},
			
			getInfo(schoolId) {
				this.m_show("加载中");
				getSchoolInfo(schoolId).then(res=> {
					this.m_hide();
					let role = res.data.teachers
					this.creatList = role;
					role.map(item => {
						if(this.roleList.indexOf(item.roleName) == -1){
							this.roleList.push(item.roleName);
						}
					})
					this.school = res.data;
				})
			},
			
			toStuIndex(item){
				uni.navigateTo({
					url: `/pages/summer/student_info/index?stuid=${item.stuId}`
				})
			}
			
			
		}
	}
</script>

<style scoped lang="scss">
	page {
		// background-color: #F9F9F9;
		background-color: white;
	}
	
	.stu_info {
		width: 100%;
		border-bottom: solid 2rpx #eee;
		background-color: #fff;
		padding: 30rpx;
	}

	.class-info {
		background: linear-gradient(0deg, #E9E9E9 0%, #DEDEDE 100%);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx;

		.class-name {
			font-size: 33rpx;
			font-weight: 400;
		}

		.time {
			margin-top: 10rpx;
			display: flex;
			flex-wrap: nowrap;

			.camp {
				margin-right: 30rpx;
			}
		}
	}

	.container_list {
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.class-list-item,
	.item-left,
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.class-list-item {
		background-color: #fff;
		padding: 20rpx 0;
	}

	.item-left .img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.item-right {
		width: 24rpx;
		height: 24rpx;
	}
</style>